<template>
	<alert :show="show">
		<view class="alert-content">
			<view class="alert__title">很遗憾，这次没有中签~</view>
			<view class="alert__subtitle">下次活动等待你的加入！</view>
			<view class="alert__img-wrapper">
				<image class="alert__img" src="https://imgcdn.ecbao.cn/nft/lottery/fail.png" mode="aspectFill"></image>
			</view>
			<view class="btn-confirm" @tap.stop.prevent="onConfirm">我知道了</view>
		</view>
	</alert>
</template>

<script>
	import alert from '../index.vue';

	export default {
		components: {
			alert
		},
		props: {
			show: Boolean
		},
		data() {
			return {}
		},
		methods: {
			onConfirm: function(e) {
				this.$emit('dismiss');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alert-content {
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 60rpx 40rpx;
		text-align: center;
	}

	.alert__title {
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.alert__subtitle {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: $uni-text-color;
	}

	.alert__img-wrapper {
		width: 200rpx;
		height: 200rpx;
		margin: 60rpx auto;
	}

	.alert__img {
		width: 100%;
		height: 100%;
	}

	.btn-confirm {
		height: 76rpx;
		background: $uni-bg-color;
		border-radius: 38rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 76rpx;
	}
</style>
